<template>
    <div class="img-item">
        <!-- 编辑推荐歌单的 图片项显示组件 -->
        <img :src="item.picUrl||item.cover"/>
        <p>{{item.name}}</p>
        <span v-if="item.playCount">{{item.playCount|formatNumber}}</span>
    </div>
</template>
<script>
export default {
    props:{
        //属性数据，是一个对象,是一个歌单信息
        item:Object 
    },
    filters:{
        formatNumber(value){
            return (value/10000).toFixed(1)+"万";
        }
    }
}
</script>
<style lang="less" scoped>
.img-item{
    position: relative;
    margin-bottom:14px;
    img{
        display: block;
        width:100%;
    }
    p{
        font-size:14px;
        color:#555;
        padding:5px 3px;
    }
    span{
        position: absolute;
        top:5px;
        right:8px;
        font-size:12px;
        color:white;
        &::before{
            content:"";
            background-image: url();
            background-repeat: no-repeat;
            position: absolute;
            width:12px;
            height:12px;
            left:-14px;
            top:0px;
            
        }
    }
}
</style>